<template>
    <el-dialog v-model="visible" width="840px" :show-close="false" @close="closeModal">
        <videoPlay ref="videoPlayREF" v-bind="options" />
    </el-dialog>
</template>
<script lang="ts" setup>
import 'vue3-video-play/dist/style.css'
import { videoPlay } from 'vue3-video-play'


const visible = ref(false)
const videoPlayREF = ref()
const options = reactive({
    width: '800px', //播放器高度
    height: '450px', //播放器高度
    color: "#409eff", //主题色
    title: '', //视频名称
    src: "", //视频源
    muted: false, //静音
    webFullScreen: false,
    speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速
    autoPlay: true, //自动播放
    loop: true, //循环播放
    mirror: false, //镜像画面
    ligthOff: false,  //关灯模式
    volume: 0.3, //默认音量大小
    control: true, //是否显示控制
    controlBtns: ['audioTrack', 'quality', 'speedRate', 'volume', 'setting', 'pip', 'pageFullScreen', 'fullScreen'] //显示所有按钮,
})

const closeModal = () => {

    videoPlayREF.value.pause()

}

const playFn = () => {
    videoPlayREF.value.play()

}


defineExpose({
    visible,
    options,
    playFn
})


</script>